<template>
    <div class="pay" :style="{ height: setHeight + 'px' }">
        <div class="payBalance">
            <div class="payTitle">
                <span> {{ $t("TopUpAmount") }}</span>
            </div>
            <div class="payNumber">
                <span class="symbol">&yen;</span>
                <input type="text" v-model="money" @input="inputMoney" />
            </div>
        </div>
        <div class="submit">
            <van-button type="info" :disabled="!money" @click="pay">
                {{ $t("sureToAmount") }}
            </van-button>
        </div>
    </div>
</template>

<script>
import { Button, Notify } from 'vant';
import 'vant/lib/notify/style/less';
export default {
    name: 'walletPay',
    components: {
        [Button.name]: Button,
        [Notify.name]: Notify
    },
    data () {
        return {
            money: '',
            realMoney: 0,
            maxlength: 5,
            setHeight: 0
        };
    },
    mounted () {
        this.setHeight = this.$util.ScreenCanUseHeight();
    },
    watch: {
        money (after, before) {
            const interger = after.toString().split('.')[0];
            const decimal = after.toString().split('.')[1];
            if (interger.length > 5) {
                this.money = before;
                Notify({
                    message: this.$t('errorMessage.maxTopUpAmount'),
                    type: 'warning'
                });
            }
            if (decimal && decimal.length > 2) {
                this.money = before;
            }
        }
    },
    methods: {
        pay () {
            this.$util.loadingToast();
            this.realMoney = Math.abs(parseInt(this.money));
            this.$api.billsApi
                .createBill({
                    transactionMoney: this.realMoney,
                    transActionType: 1,
                    users_id: [localStorage.getItem('id'), '5e6d937889f07e4920013759']
                })
                .then(result => {
                    if (result) {
                        this.$util.successToast(this.$t('TopUpAmountSuccess'));
                        this.$router.go(-1);
                    } else {
                        this.$util.failToast(this.$t('TopUpAmountFailure'));
                    }
                })
                .catch(err => {
                    throw err;
                });
        },
        inputMoney () {
            console.log(this.money);
            this.money = this.money.replace(/\D/g, '');
        }
    }
};
</script>

<style scoped lang="less" src="./less/wallet-pay.less"></style>
